<template>
  <div>
    <div v-if="!showTravelTips">
      <!-- 天气预报部分 -->
      <div class="weather-card">
        <h1>天气预报</h1>
        <p>地点: {{ weatherData.address }}</p>
        <div class="weather-info">
          <div class="weather-item" v-for="item in weatherData.weatherData" :key="item.date">
            <p>日期: {{ item.date }}</p>
            <p>天气: {{ item.condition }}</p>
            <p>温度: {{ item.temperature }}°C</p>
            <p>风速: {{ item.windSpeed }} km/h</p>
          </div>
        </div>
        <button @click="showTravelTips = true">查看出行建议</button>
      </div>
    </div>
    <div v-else>
      <!-- 出行建议部分 -->
      <div class="travel-tips">
        <h1>出行建议</h1>
        <div class="tips-item">
          <h3>穿着建议:</h3>
          <p>{{ travelTips.clothing }}</p>
        </div>
        <div class="tips-item">
          <h3>交通建议:</h3>
          <p>{{ travelTips.transportation }}</p>
        </div>
        <div class="tips-item">
          <h3>注意事项:</h3>
          <p>{{ travelTips.precautions }}</p>
        </div>
        <button @click="showTravelTips = false">返回天气预报</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const weatherData = ref({
  address: '',
  weatherData: []
})
const travelTips = ref({
  clothing: '',
  transportation: '',
  precautions: ''
})
const showTravelTips = ref(false)

onMounted(() => {
  // 从路由参数中获取地址和天气数据
  if (route.query.address && route.query.weatherData) {
    weatherData.value.address = route.query.address
    weatherData.value.weatherData = JSON.parse(route.query.weatherData)
    
    // 根据天气情况给出出行建议
    generateTravelTips()
  }
})

// 根据天气情况生成出行建议
const generateTravelTips = () => {
  const latestWeather = weatherData.value.weatherData[0]
  
  if (latestWeather.condition.includes('雨') || latestWeather.condition.includes('雪')) {
    travelTips.value.clothing = '建议穿着防水外套和舒适的鞋子，并携带雨具'
    travelTips.value.transportation = '建议选择公共交通或自驾，道路可能湿滑'
    travelTips.value.precautions = '注意防滑，避免在积水区域行走，关注天气变化'
  } else if (latestWeather.condition.includes('晴') || latestWeather.condition.includes('多云')) {
    if (latestWeather.temperature > 25) {
      travelTips.value.clothing = '建议穿着轻便透气的衣物，注意防晒'
      travelTips.value.transportation = '各种交通方式都适合，晴好天气适合户外活动'
      travelTips.value.precautions = '注意补水，避免长时间暴露在阳光下'
    } else {
      travelTips.value.clothing = '根据温度选择合适的衣物，早晚温差较大可适当多穿'
      travelTips.value.transportation = '交通不受影响，适合出行'
      travelTips.value.precautions = '注意天气变化，随身携带轻便外套'
    }
  } else if (latestWeather.condition.includes('阴')) {
    travelTips.value.clothing = '建议穿着舒适保暖的衣物'
    travelTips.value.transportation = '交通正常，但能见度可能较低'
    travelTips.value.precautions = '注意保暖，出行前查看最新天气预报'
  }
}
</script>

<style scoped>
.weather-card, .travel-tips {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.weather-info {
  margin: 20px 0;
}

.weather-item {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tips-item {
  margin-bottom: 15px;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>